<template>
  <div class="home">
    <!-- banner大图 -->
    <Banner />

    <div class="home-content">
      <!-- 精品推荐 -->
      <Recommend :recommendList="recommendList" />

      <!-- 热门兑换 -->
      <Hot :hotList="hotList" />
    </div>

    <!-- 积分兑换 -->
    <Integral />
  </div>
</template>

<script>
  // 请求api相关
  import {
    getRecommend,
    getHot
  } from '@/request/homeApi.js'

  // 组件相关
  import Banner from '@/components/home/Banner.vue'
  import Recommend from '@/components/home/Recommend.vue'
  import Hot from '@/components/home//Hot.vue'
  import Integral from '@/components/home/Integral.vue'
  export default {
    name: 'Home',
    components: {
      Banner,
      Recommend,
      Hot,
      Integral
    },
    data() {
      return {
        recommendList:[],
        hotList:[]
      };
    },
    methods: {

    },
    created() {
      // 请求推荐列表数据
      getRecommend().then(res=>{
        this.recommendList =  res.data.data.records
      })

      // 请求热门兑换列表数据
      getHot().then(res=>{
        this.hotList = res.data.data.records.filter((item,index) => index < 6 )
      })
    }
  }
</script>

<style lang="less" scoped>
  .home-content {
    padding-top: 1px;
    background: #F5F5F5;
  }
</style>